<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>袁侠的个人简介</title>
    <meta name="theme-color" content="#ffc91d"/>
    <link rel="icon" href="douyin/static/img/32.png" sizes="32x32"/>
    <link rel="icon" href="douyin/static/img/192.png" sizes="192x192"/>
    <link href="douyin/static/kico.css" rel="stylesheet" type="text/css"/>
    <link href="douyin/static/moreduo.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
</head>
<body>
 <audio  autoplay="autopaly" >
      <source src="douyin/把孤独当做晚餐.mp3" type="audio/mp3" />
      </audio>
<aside class="sidebar">
    <div class="avatar">
        <img src="douyin/static/img/avatar.jpg" title="保罗酱"/>
    </div>
    <nav class="nav">
        <a href="#info">资料</a>
        <a href="#skills">技能</a>
        <a href="#works">作品</a>
        <a href="#story">经历</a>
        <a href="#team">团队</a>
    </nav>
</aside>
<main>
    <section id="info">
        <div class="wrap">
            <h2 class="title">个人资料</h2>
            <div class="row">
                <div class="col-l-4">
                    <p>姓名：袁侠</p>
                    <p>性别：男</p>
                    <p>年龄：26</p>
                    <p>英文名：yuanxia</p>
                    <!-- <p>学历：大专</p> -->
                </div>
                <div class="col-l-4">
                    <p>QQ：180802955</p>
                    <p>GitHub：<a href="https://github.com">yuanxia</a></p>
                    <p>博客：<a href="https://gitee.com/yuanxiayuanxia">http://www.wangdahai.cn</a></p>
                    <p>邮箱：<a href="https://mail.qq.com/cgi-bin/frame_html?sid=UTJ8rOUj3xuRAGsP&r=cb6dc57ac3356ce4731090d86468becb&lang=zh">180802955@qq.com</a></p>
                </div>
                <div class="col-l-4">
                    <p>我是一个热爱钻研计算机技术的青少年，从小开始对计算机有极大的兴趣。目前我专注网站开发领域。我还自己发起建立了一个制作游戏的团队，希望能和大家合作，一同创造出属于我们自己的原创作品。</p>
                </div>
            </div>
        </div>
    </section>
    <section id="skills">
        <div class="wrap">
            <h2 class="title">掌握的技能</h2>
            <div class="row scrollable">
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-html5"></i>
                    </div>
                    <div class="skills-title">
                        <h3>HTML 5</h3>
                        <p>熟悉 HTML5 网站的架构和开发</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-css3"></i>
                    </div>
                    <div class="skills-title">
                        <h3>CSS3</h3>
                        <p>熟悉使用 CSS3 写响应式网站、动画等</p>
                    </div>
                </div>
                <div class="col-s-6 col-m-4 center-fixed">
                    <div class="skills-icon">
                        <i class="fa fa-code"></i>
                    </div>
                    <div class="skills-title">
                        <h3>JavaScript</h3>
                        <p>能使用 JS 制作简单的程序、交互与特效</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="works">
        <div class="wrap">
            <h2 class="title">个人作品</h2>
            <div class="row">
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/binkic-2017.jpg"/>
                        <p><a href="douyin/树形代码.html">点击这里看——html5唯美网页</a></p> 
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/space.jpg"/>
                         <p><a href="douyin/旋涡.html">点击这里看——粒子旋涡</a></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/dream.jpg"/>
                        <p><a href=" douyin/激光打字.html">点击这里看——激光打字</a></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/kico-style.jpg"/>
                       <p><a href="douyin/三维星空.html">点击这里看——奇幻三维星空</a></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/robots.jpg"/>
                        <p><a href="douyin/瀑布.html">点击这里看——瀑布</a></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/single.jpg"/>
                        <p><!-- <a href="表白小软件.exe"> -->表白小软件（点击下载）<!-- </a> --></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/kico-player.jpg"/>
                        <p><!--<a href="douyin/login.jsp">-->Servlet登陆<!-- </a> --></p>
                    </div>
                </div>
                <div class="col-s-6">
                    <div class="works-item">
                        <img src="douyin/static/img/works/sweet.jpg"/>
                        <p><!--<a href="douyin/1.jsp">-->后缀jsp<!-- </a> --></p>
                    </div>
                </div>
              <!--   <div class="col-s-6">
                    <div class="works-item">
                        <img src="static/img/works/binkic-2018.jpg"/>
                       <p><a href="douyin/2.html"></a></p>
                    </div> -->
                </div>
            </div>
        </div>
    </section>
    <section id="story">
        <div class="wrap">
            <h2 class="title">个人经历</h2>
            <div class="row">
                <div class="col-m-8">
                    <ul class="timeline">
                        <li>2018.09.19：个人编写的播放器 <a href="javascript:;" target="_blank">Kico Player</a> 发布测试版</li>
                        <li>2018.12.12：基于 ES6 的时钟小工具 <a href="javascript:;" target="_blank">Kico Tools</a> 发布测试版</li>
                        <li>2018.12.18：第一个基于 PHP 的个人首页 <a href="javascript:;" target="_blank">Sweet</a> 发布正式版</li>
                        <li>2019.01.01：缤奇团队新<a href="javascript:;" target="_blank">官网</a>正式上线，后端采用 Typecho 驱动</li>
                        <li>2019.02.16：结合前后端制作了一个春节的<a href="javascript:;" target="_blank">问答红包</a>，使用正则判断答案</li>
                    </ul>
                </div>
                <div class="col-m-4 center-fixed">
                    <img src="douyin/static/img/story.png"/>
                </div>
            </div>
        </div>
    </section>
    <section class="content-d" id="team">
        <div class="wrap">
            <h2 class="title">我的团队</h2>
            <div class="row">
                <div class="col-m-6">
                    <p>我的团队 - 缤奇团队由一群热爱科技创新的年轻人所组成，做到了“实际”与“创新”的结合。奇思妙想不乏真正落实。集思广益，生动有趣的创意，尽在缤奇。缤奇团队如今有超过30名成员，各个部门互帮互助，同为一个目标而努力进取着。</p>
                    <p>缤奇团队致力于开发原创游戏、动漫等项目。目前我们已完成项目有手机游戏“色块冲刺”、聊天娱乐项目“小缤机器人”等。正在创作项目有解密游戏“月亮湖的秘密”、VR 项目“梦想码头”等。缤奇官网 &amp; 社区已陆续开放。网站采用团队成员自主编写的 CSS3 自适应框架，针对移动设备有布局优化，缤奇团队有着丰富的网站建设技术能力、有独立的画师以及文编。</p>
                    <p>团队官网：<a href="https://gitee.com/yuanxiayuanxia">http://www.wangdahai.cn</a></p>
                </div>
                <div class="col-m-6 center">
                    <img src="douyin/static/img/team.png"/>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <p>© 2018 By <a href="http://www.wangdahai.cn" title="站长资源" target="_blank">Moreduo</a>.</p>
    </footer>
</main>

<script src="douyin/static/kico.js"></script>
<script src="douyin/static/moreduo.js"></script>

</body>
</html>